<template>
  <div class="loadingCarbin">
    <el-dialog
      v-model="open"
      :before-close="cancle"
      append-to-body
      :title="title"
      width="600px" 
      style="height: 400px;"
    >
      <el-form
        ref="carbinForm"
        class="ff"
        :model="form"
        :loading="loading"
        label-width="120px"
        label-position="top"
        :rules="rule"
      >
        <el-row :gutter="28">
          <el-col
            :span="12"
          >
            <el-form-item label="起运港" prop="portOfDeparture">
              <el-input v-model="form.portOfDeparture" clearable style="width: 100%;"></el-input>
            </el-form-item> 
          </el-col>
          <el-col
            :span="12"
          >
            <el-form-item label="目的港" prop="portOfDestination">
              <el-input v-model="form.portOfDestination" clearable style="width: 100%;"></el-input>
            </el-form-item> 
          </el-col>
          <el-col
            :span="12"
          >
            <el-form-item label="卸货港" prop="portOfDischarge">
              <el-input v-model="form.portOfDischarge" clearable style="width: 100%;"></el-input>
            </el-form-item> 
          </el-col>
          <el-col
            :span="12"
          >
            <el-form-item label="中转港代码" prop="t ransitPortCode">
              <el-input v-model="form.transitPortCode" clearable style="width: 100%;"></el-input>
            </el-form-item> 
          </el-col>

          <el-col
            :span="12"
          >
            <el-form-item label="主单号" prop="masterOrderNo" class="flex-center">
              <el-input v-model="form.masterOrderNo" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-col> 
          <el-col
            :span="12"
          >
            <el-form-item
              label="分单号"
              pro
              p="subOrderNo" 
              class="flex-center"
            >
              <el-input v-model="form.subOrderNo" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
          >
            <el-form-item label="航班/航次" prop="flightNumber" class="flex-center">
              <el-input v-model="form.flightNumber" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>

          <el-col
            :span="12"
          >
            <el-form-item label="ETD" prop="etd">
              <el-input v-model="form.etd" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
          >
            <el-form-item label="截单时间" prop="cutOffTime">
              <el-date-picker
                v-model="form.cutOffTime"
                class="full-date"
                style="width: 100%;"
                type="date"
                placeholder="选择日期时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            v-if="form.transportType == 5"
            :span="12"
          >
            <el-form-item label="装箱类型" prop="packingType">
              <el-select
                v-model="form.packingType"
                filterable
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option label="拼箱" value="1"></el-option>
                <el-option label="整柜" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="form.transportType == 5"
            :span="12"
          >
            <el-form-item label="箱型" prop="cabinetTypeList">
              <el-select v-model="form.cabinetTypeList" multiple style="width: 100%;">
                <el-option
                  v-for="dict in dicts[DictDirection.柜子型号]"
                  :key="dict.id"
                  :label="dict.cabinetType"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="form.transportType == 5"
            :span="12"
          >
            <el-form-item label="箱量" prop="cabinetNumber">
              <el-input v-model="form.cabinetNumber" :controls="false" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            v-if="form.transportType == 5"
            :span="12"
          >
            <el-form-item label="柜号" prop="cabinetNo">
              <el-input v-model="form.cabinetNo" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col
            v-if="form.transportType == 5"
            :span="6"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="6" 
          >
            <el-form-item label="船代理" prop="agent">
              <el-input v-model="form.agent" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col
            :span="12"
          >
            <el-form-item label="配舱备注" prop="cabinRemarks">
              <el-input v-model="form.cabinRemarks" clearable style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right;">
        <el-button type="info" @click="cancle">取 消</el-button>
        <el-button type="primary" @click="handlerSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineEmits } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { cabinAllocation, selectSysAirCabinetById } from '@/api/expressManager/flySea'

const dicts = useDicts()
const emit = defineEmits(['refush'])
dicts.setDicts(DictDirection.柜子型号)
const open = ref(false)
const loading = ref(false)
const title = ref(null)
const carbinForm = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const tsNo = ref(null)

interface carbinParams{
   id:'',
   [key: string]: any
}

const openFn = (args:carbinParams) => {
  open.value = true
  loading.value = true
  selectSysAirCabinetById(args.id).then(res => {
    console.log(res)
    if (res.code === 200) {
      const {
        portOfDeparture,
        portOfDestination,
        portOfDischarge,
        transitPortCode,
        masterOrderNo,
        subOrderNo,
        flightNumber,
        etd,
        transportType,
        cutOffTime,
        packingType,
        cabinetTypeList,
        cabinetNumber,
        cabinetNo,
        id,
        cabinRemarks,
      } = res.data
      Object.assign(form.value, {
        portOfDeparture,
        portOfDestination,
        portOfDischarge,
        transitPortCode,
        masterOrderNo,
        subOrderNo,
        flightNumber,
        etd,
        transportType,
        cutOffTime,
        packingType,
        cabinetTypeList,
        cabinetNumber,
        cabinetNo,
        id,
        cabinRemarks,
      })

      console.log(form)
    }
  }).finally(() => {
    loading.value = false
  })
}

const rule = { transportType: [{ required: true, message: '运输类型不能为空', trigger: ['blur', 'change'] }],
  cabinetTypeList: [{ required: true, message: '箱型不能为空', trigger: ['change'] }],
  cabinetNo: [{ required: true, message: '柜号不能为空', trigger: ['blur', 'change'] }],
  masterOrderNo: [{ required: true, message: '主单号不能为空', trigger: ['blur', 'change'] }],
  packingType: [{ required: true, message: '装箱类型不能为空', trigger: ['blur', 'change'] }] }
const form = ref({
  portOfDeparture: '',
  portOfDestination: '',
  portOfDischarge: '',
  transitPortCode: '',
  masterOrderNo: '',
  subOrderNo: '',
  flightNumber: '',
  etd: '',
  transportType: 3,
  cutOffTime: '',
  packingType: '',
  cabinetTypeList: [],
  cabinetNumber: '',
  cabinetNo: '',
  id: '',
  // agent: '',
  cabinRemarks: '',
})
const cancle = () => {
  open.value = false
}
const handlerSubmit = () => {
  $validateForm(carbinForm.value, () => {
    const data = form.value
    cabinAllocation(data).then(res => {
      if (res.code == 200) {
        ElMessage.success('配仓成功')
        open.value = false
        refush()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
const refush = () => {
  emit('refush')
}
const init = () => {
  form.value.transportType = tsNo.value
}
defineExpose({
  openFn,
  title,
  tsNo,
  init,
  // getList,
})
</script>
<style lang="less" scoped>
:deep(.loadingCarbin .el-overlay .el-dialog__body) {
  padding-left: 30px;
  padding-right: 30px;
}
// /deep/ .el-input__inner {
//   // padding-right: 15px !important;
// }
:deep(.full-date .el-input__wrapper){
    width:100%
}
</style>